<style lang="less" scoped>
h4 {
    margin: 0.8em;
}
</style>
<template>
    <div class="">
        <h4>各盟市回填订单</h4>
        <Table :columns="columns1" :data="data1"></Table>
        <Modal v-model="modal" width="1100">
            <p slot="header">
                <span>订单详情</span>
            </p>
            <div style="">
                <Tabs type="card" @on-click="onClickTab">
                    <TabPane label="未审核订单" name="unpass">
                        <Table :columns="columns2" :data="data2"></Table>
                    </TabPane>
                    <TabPane label="已审核订单" name="pass">
                        <Table :columns="columns3" :data="data3"></Table>
                    </TabPane>
                </Tabs>
            </div>
            <div slot="footer">
                <Button type="text" @click="modal=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            columns1: [
                {
                    title: '编号',
                    key: 'id'
                },
                {
                    title: '公司名称',
                    key: 'name'
                },
                {
                    title: '待回填数',
                    key: 'wait_num'
                },
                {
                    title: '待审核数',
                    key: 'auditing_num'
                },
                {
                    title: '完成订单数',
                    key: 'pass_num'
                },
                {
                    title: '状态',
                    key: 'action',
                    fixed: 'right',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.row.id, 0)
                                    }
                                }
                            }, '查看')
                        ]);
                    }
                }
            ],
            data1: [],
            columns2: [
                {
                    title: '订单编号',
                    key: 'order_code'
                },
                {
                    title: '接收类型',
                    key: 'recep_type'
                },
                {
                    title: '需求人',
                    key: 'demand_name'
                },
                {
                    title: '需求部门',
                    key: 'demand_deprt_name'
                },
                {
                    title: '创建时间',
                    key: 'order_date'
                },
                {
                    title: '状态',

                    render: (h, params) => {
                        const row = params.row;
                        const color = row.status_code == 0 ? 'red' : row.status_code == 10 ? 'green' : 'yellow';
                        const text = row.status_descp

                        return h('Tag', {
                            props: {
                                type: 'dot',
                                color: color
                            }
                        }, text);
                    }
                }
            ],
            data2: [],
            columns3: [
                {
                    title: '订单编号',
                    key: 'order_code'
                },
                {
                    title: '接收类型',
                    key: 'recep_type'
                },
                {
                    title: '需求人',
                    key: 'demand_name'
                },
                {
                    title: '需求部门',
                    key: 'demand_deprt_name'
                },
                {
                    title: '创建时间',
                    key: 'order_date'
                },
                {
                    title: '状态',

                    render: (h, params) => {
                        const row = params.row;
                        // const color = row.status_code == 0 ? 'red' : row.status_code == 10 ? 'green' : 'yellow';
                        const text = row.status_descp

                        return h('Tag', {
                            props: {
                                type: 'dot',
                                color: 'blue'
                            }
                        }, text);
                    }
                }
            ],
            data3: [],
            modal: false,
            comp_id: 1
        }
    },
    computed: {

    },
    mounted() {
        this.$store.dispatch("reportIndex").then(resp => {
            this.data1 = resp.data.items
        })
    },
    methods: {
        show(comp_id, pass) {
            this.modal = true
            this.comp_id = comp_id
            this.$store.dispatch("reportComp", { comp_id, pass }).then(resp => {
                if (!pass) {
                    this.data2 = resp.data.items
                } else {
                    this.data3 = resp.data.items
                }
            })
        },
        onClickTab(name) {
            console.log(name)
            if (name == 'unpass') {
                this.show(this.comp_id, 0)
            } else {
                this.show(this.comp_id, 1)
            }
        }
    }
}
</script>
